@extends('admin::layouts.admin')
@section("main-content")
    <style>
        .el-upload {
            display: block;
        }
    </style>
    <div class="row">
        <div class="col-md-4">
            <div class="box box-widget widget-user-2">
                <!-- Add the bg color to the header using any of the bg-* classes -->
                <div class="widget-user-header bg-aqua-active" id="vue-upload">
                    <el-upload
                        class="widget-user-image"
                        :headers="headers"
                        :disabled="disabled"
                        name="image"
                        class="upload-demo"
                        action="{{ admin_url('admins/upload-avatar') }}"
                        :on-remove="remove"
                        :on-success="success"
                        :file-list="list"
                        list-type="picture"
                        :show-file-list="false"
                    >
                        <div class="widget-user-image">
                            <el-tooltip class="item"
                                        effect="dark"
                                        content="点击修改头像"
                                        placement="bottom-start"
                            >
                                <img class="img-circle admin-avatar"
                                     style="width:65px;height: 65px"
                                     src="{{ \Illuminate\Support\Arr::get($user, 'avatar') }}"
                                     alt="{{ \Illuminate\Support\Arr::get($user, 'name') }}"
                                     title="点击修改头像"
                                >
                            </el-tooltip>
                        </div>
                    </el-upload>
                    <h3 class="widget-user-username">{{ \Illuminate\Support\Arr::get($user, 'name') }}</h3>
                    <h5 class="widget-user-desc">Lead Developer</h5>
                </div>
                <div class="box-footer no-padding">
                    <ul class="nav nav-stacked">
                        <li>
                            <a href="#">
                                登录邮箱: {{ \Illuminate\Support\Arr::get($user, 'email') }}
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                登录时间: {{ \Illuminate\Support\Arr::get($user, 'last_login_time') }}
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                登录 IP : {{ \Illuminate\Support\Arr::get($user, 'last_login_ip') }}
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                注册时间: {{ \Illuminate\Support\Arr::get($user, 'created_at') }}
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                修改时间: {{ \Illuminate\Support\Arr::get($user, 'updated_at') }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="nav-tabs-custom">
                <!-- Tabs within a box -->
                <ul class="nav nav-tabs pull-left" style="width: 100%">
                    <li class="active">
                        <a href="#password" data-toggle="tab">
                            修改密码
                        </a>
                    </li>
                </ul>
                <div class="tab-content no-padding">
                    <div class="chart tab-pane active" id="password">
                        <form class="form-horizontal"
                              action="{{ admin_url('admins/update-password') }}"
                              method="post"
                              data-ajax="true"
                              id="password-form"
                            {{--                              data-validate="true"--}}
                        >
                            <div class="box-body" style="width: 60%;">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label required">
                                        旧密码
                                    </label>
                                    <div class="col-sm-8">
                                        <input type="password"
                                               class="form-control"
                                               name="old_password"
                                               placeholder="请输入旧密码"
                                               minlength="6"
                                               required
                                        />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label required">
                                        新密码
                                    </label>
                                    <div class="col-sm-8">
                                        <input type="password"
                                               class="form-control"
                                               name="password"
                                               placeholder="请输入旧密码"
                                               required
                                               minlength="6"
                                        />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label required">
                                        确认密码
                                    </label>
                                    <div class="col-sm-8">
                                        <input type="password"
                                               class="form-control"
                                               name="password_confirmation"
                                               placeholder="请输入确认密码"
                                               required
                                               minlength="6"
                                               equalTo="input[name=password]"
                                        />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-4 col-sm-8">
                                        <button type="submit" class="btn btn-info">修改密码</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="{{ asset('admin-assets/plugins/jsencrypt/jsencrypt.min.js') }}"></script>
    <script>
        vueUpload(".admin-avatar")
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(`{!! $config['public_key'] !!}`);
        $("input[disabled]").parent().click(function () {
            var $input = $(this).find("input");
            $input.attr('disabled', false).val($input.data('val'))
        });

        $("#password-form").data("beforeData", function (data) {
            for (var i in data) {
                data[i].value = encrypt.encrypt(data[i].value);
            }

            return data;
        });
    </script>
@endpush
